import { ScrollView, View, Text, Image, Button } from '@tarojs/components';
import React, { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { AtList, AtSwipeAction, AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui';
import { connect } from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import { store2Props } from './selectors';
import Blank from '@/pages/common/blank';
import notdataImg from '@/assets/image/none/empty_house.png'
import uesrImg from '@/assets/image/my/uesr_pic.png'
import youImg from '@/assets/image/my/you.png'

actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      curNow: 0, //tab状态
      delHouseModel: false,
      delUserModel: false,
      showModel: false,
      house: {},
      user: {},
      id: ''
    };
  }

  componentDidMount() { }

  componentDidShow() {
    this.props.actions.init()
  }

  componentWillUnmount() {
    this.props.actions.clean();
  }

  renderUser(list) {
    let {
      main: { currentHouse },
      actions: { action },
    } = this.props;
    let listView = [];
    list.map((item, index) => {
      listView.push(
        <View className='radius' key={index} style={{ marginBottom: '20px' }}>
          {currentHouse[0].houseHoldType == 1 ? (
            <AtSwipeAction
              className='AtSwipe'
              key={currentHouse[0].id}
              onClick={this.onTap.bind(this, item)}
              autoClose={true}
              options={[
                {
                  text: '删除',
                  style: {
                    color: '#ffffff',
                    width: '80px',
                    margin: 0,
                    fontSize: '14px!important',
                    background: '#FF3E1F',
                  },
                },
              ]}
            >
              <View className='b_row' style={{ position: 'relative', padding: '10px' }}>
                <View className='center' style={{ flex: 2 }}>
                  <View className='c_icon'>
                    {item.pictureUrl ? (
                      <Image className='icon' src={item.pictureUrl} mode="aspectFill" />
                    ) : (
                      <Image className='icon' src={uesrImg} mode="aspectFill" />
                    )}
                  </View>
                </View>
                <View className='c_sb' style={{ flex: 5, padding: '15rpx 0 15rpx 20rpx', }}>
                  <View style={{ flexDirection: 'row' }}>
                    <Text className='l_font'>{item.houseHoldName}</Text>
                    {item.houseHoldType == 1 ? (
                      <Text className='ht_1'>业主</Text>
                    ) : item.houseHoldType == 2 ? (
                      <Text className='ht_2'>租客</Text>
                    ) : (
                      <Text className='ht_3'>家属</Text>
                    )}
                  </View>
                  <View style={{ flexDirection: 'row' }}>
                    <Text className='l_font1' style={{ marginRight: '8rpx' }}>
                      {item.county}
                    </Text>
                    <Text className='d_border'></Text>
                    <Text className='l_font1' style={{ marginLeft: '8rpx', marginRight: '8rpx' }}>
                      {item.street}
                    </Text>
                    <Text className='d_border'></Text>
                    <Text className='l_font1' style={{ marginLeft: '8rpx' }}>
                      {item.houseArea}㎡
                    </Text>
                  </View>
                </View>
                <View
                  style={{
                    flex: 2.5,
                    padding: '15rpx 0',
                    justifyContent: 'flex-end',
                    alignContent: 'center',
                  }}>
                  {item.status == 0 && currentHouse[0].houseHoldType == 1 ? (
                    <View
                      className='statusBtn'
                      onClick={() => {
                        if (currentHouse[0].houseHoldType == 1) {
                          this.setState({ id: item.id, showModel: true })
                        } else {
                          Taro.showToast({
                            title: '只有业主可以操作',
                            icon: 'none',
                            duration: 2000,
                          });
                        }
                      }}
                    >
                      <Text className='btnText'>审核</Text>
                    </View>
                  ) : (
                    <View
                      style={{
                        position: 'absolute',
                        right: 0,
                        top: 0,
                        borderBottomLeftRadius: '10rpx',
                        overflow: 'hidden',
                      }}>
                      <Text
                        className={
                          item.status == 0
                            ? 'statusText1'
                            : item.status == 2 || item.status == 4
                              ? 'statusText2'
                              : 'statusText'
                        }>
                        {item.status == 0
                          ? '待业主审核'//待审核
                          : item.status == 1
                            ? '待物业审核'//业主审核通过
                            : item.status == 2
                              ? '业主审核不通过'
                              : item.status == 3
                                ? '物业审核通过'
                                : item.status == 4
                                  ? '物业审核不通过'
                                  : '未知'}
                      </Text>
                    </View>
                  )}
                </View>
              </View>
            </AtSwipeAction>
          ) : (
            <View className='AtSwipe' style={{ backgroundColor: '#ffffff', padding: '0 0 0 15rpx', }}>
              <View className='b_row'>
                <View className='center' style={{ flex: 2 }}>
                  <View className='c_icon'>
                    {item.pictureUrl ? (
                      <Image className='icon' src={item.pictureUrl} mode="aspectFill" />
                    ) : (
                      <Image className='icon' src={uesrImg} mode="aspectFill" />
                    )}
                  </View>
                </View>
                <View className='c_sb' style={{ flex: 5, padding: '15rpx 0 15rpx 0', }}>
                  <Text className='l_font'>{item.houseHoldName}</Text>
                  <View style={{ flexDirection: 'row' }}>
                    <Text className='l_font1' style={{ marginRight: '8rpx' }}>
                      {item.county}
                    </Text>
                    <Text className='d_border'></Text>
                    <Text className='l_font1' style={{ marginLeft: '8rpx', marginRight: '8rpx' }}>
                      {item.street}
                    </Text>
                    <Text className='d_border'></Text>
                    <Text className='l_font1' style={{ marginLeft: '8rpx' }}>
                      {item.houseArea}㎡
                    </Text>
                  </View>
                </View>
                <View className='center' style={{ flex: 2.5, padding: '0 15rpx' }}>
                  {item.status == 0 && currentHouse[0].houseHoldType == 1 ? (
                    <View
                      className='statusBtn'
                      onClick={() => {
                        if (currentHouse[0].houseHoldType == 1) {
                          this.setState({ id: item.id, showModel: true })
                        } else {
                          Taro.showToast({
                            title: '只有业主可以操作',
                            icon: 'none',
                            duration: 2000,
                          });
                        }
                      }}
                    >
                      <Text className='btnText'>待审核</Text>
                    </View>
                  ) : (
                    <Text className='t_right'>
                      {item.status == 0
                        ? '待业主审核'//待审核
                        : item.status == 1
                          ? '待物业审核'//业主审核通过
                          : item.status == 2
                            ? '业主审核不通过'
                            : item.status == 3
                              ? '物业审核通过'
                              : item.status == 4
                                ? '物业审核不通过'
                                : '未知'}
                    </Text>
                  )}
                </View>
              </View>
            </View>
          )}
        </View>,
      );
    });
    return listView;
  }

  renderOtherH(list) {
    let listView = [];
    list.map((item, index) => {
      listView.push(
        <AtList>
          <AtSwipeAction
            className='AtSwipe'
            key={item.id}
            onClick={this.onTap.bind(this, item)}
            autoClose={true}
            options={[
              {
                text: '解绑',
                style: {
                  color: '#ffffff',
                  width: '80px',
                  margin: 0,
                  fontSize: '14px!important',
                  background: '#FF3E1F',
                },
              },
            ]}
          >
            <View style={{ flex: 1 }}>
              <View className='l_top'>
                <Text className='w_30'>
                  {item.communityName}
                </Text>
                <Text className='w_24'>
                  {item.buildingName}栋
                  {item.unitName}
                  单元
                  {item.houseCode}室
                </Text>
              </View>
              <View className='b_row' style={{ backgroundColor: '#ffffff', padding: '20rpx' }}>
                <View className='center' style={{ flex: 2 }}>
                  <View className='c_icon'>
                    {item.pictureUrl ? (
                      <Image className='icon' src={item.pictureUrl} mode="aspectFill" />
                    ) : (
                      <Image className='icon' src={uesrImg} mode="aspectFill" />
                    )}
                  </View>
                </View>
                <View className='c_sb' style={{ flex: 5, padding: '15rpx 0 15rpx 20rpx', }}>
                  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                    <Text className='l_font'>{item.houseHoldName}</Text>
                    {item.houseHoldType == 1 ? (
                      <Text className='ht_1'>业主</Text>
                    ) : item.houseHoldType == 2 ? (
                      <Text className='ht_2'>租客</Text>
                    ) : (
                      <Text className='ht_3'>家属</Text>
                    )}
                  </View>
                  <View style={{ flexDirection: 'row' }}>
                    <Text className='l_font1' style={{ marginRight: '8rpx' }}>
                      {item.county}
                    </Text>
                    <Text className='d_border'></Text>
                    <Text className='l_font1' style={{ marginLeft: '8rpx', marginRight: '8rpx' }}>
                      {item.street}
                    </Text>
                    <Text className='d_border'></Text>
                    <Text className='l_font1' style={{ marginLeft: '8rpx' }}>
                      {item.houseArea}㎡
                    </Text>
                  </View>
                </View>
                <View className='center' style={{ flex: 2.5, padding: '15rpx 0', position: 'relative', }}>
                  <View
                    // onClick={() => {
                    //   this.props.navigation.navigate('HouseDetail', {
                    //     detail: item,
                    //   });
                    // }}
                    onClick={() => {
                      Taro.setStorageSync('HouseDetail', item)
                      Taro.navigateTo({
                        url: '/pages/package-A/house/detail/index'
                      })
                    }}
                    style={{
                      flexDirection: 'row',
                      position: 'absolute',
                      bottom: '20rpx',
                      right: '15rpx',
                    }}>
                    <Text
                      style={{
                        fontSize: '24rpx',
                        color: '#333333',
                      }}>
                      查看详情
                    </Text>
                    <Image className='rightImg' src={youImg} mode="widthFix" />
                  </View>
                </View>
              </View>
            </View>
          </AtSwipeAction>
        </AtList>,
      );
    });
    return listView;
  }

  //解绑房屋
  onTap = async (item, e) => {
    const {
      actions: { action },
    } = this.props;
    if (e.text === '解绑') {
      this.setState({ house: item, delHouseModel: true, })
    }
    if (e.text === '删除') {
      this.setState({ user: item, delUserModel: true })
    }
  };

  //解绑当前房屋
  async currentHouseDeletes() {
    let {
      main: { currentHouse, other },
      actions: { action },
    } = this.props;
    if (currentHouse[0].houseHoldType == 1) {
      //业主
      if (other.length > 0) {
        Taro.showToast({
          title: '请先删除其他住户！',
          icon: 'none',
          duration: 2000,
        });
        return
      } else {
        action.userDeletes(currentHouse[0].userHouseId);
        this.setState({ delHouseModel: false })
      }
    } else {
      //其他身份
      action.userDeletes(currentHouse[0].userHouseId);
      this.setState({ delHouseModel: false })
    }
  }

  //解绑其他房屋
  async homeDeletes() {
    let { house } = this.state;
    let {
      actions: { action },
    } = this.props;
    action.deleteHouse(house.userHouseId);
    this.setState({ delHouseModel: false })
  }

  //取消
  async handleClose() {
    this.setState({ showModel: false })
  }

  //拒绝
  async handleCancel() {
    let { id } = this.state;
    this.props.actions.action.houseProve(id, 2)
    this.setState({ showModel: false })
  }

  //通过
  async handleConfirm() {
    let { id } = this.state;
    this.props.actions.action.houseProve(id, 1)
    this.setState({ showModel: false })
  }

  async addClick() {
    let itemStr = Taro.getStorageSync('b2b-wechat@login')
    if (!itemStr) {
      Taro.navigateTo({
        url: '/pages/package-C/login/login/index',
      });
      return
    }
    Taro.navigateTo({
      url: '/pages/package-A/house/add/index'
    })
  }

  render() {
    let { curNow, delHouseModel, house, delUserModel, user, showModel } = this.state;
    let {
      main: { cardList, currentHouse, otherHouse, other },
      actions: { action },
    } = this.props;
    return (
      <View className="packageAHouse">
        {cardList.length > 0 ? (
          <View style={{ flex: 1 }}>
            <View className='t_row'>
              <View
                className={curNow == 0 ? 't_a_view' : 't_view'}
                onClick={() => {
                  this.setState({ curNow: 0 });
                }}>
                <Text
                  className={curNow == 0 ? 't_a_text' : 't_text'}>
                  当前房屋
                </Text>
                <View className={curNow == 0 ? 't_a_border' : 't_border'}></View>
              </View>
              <View
                className={curNow == 1 ? 't_a_view' : 't_view'}
                onClick={() => {
                  this.setState({ curNow: 1 });
                }}>
                <Text className={curNow == 1 ? 't_a_text' : 't_text'}>
                  其他房屋
                </Text>
                <View className={curNow == 1 ? 't_a_border' : 't_border'}></View>
              </View>
            </View>
            <ScrollView className='scrollView' scrollY>
              {curNow == 0 && currentHouse.length > 0 ? (
                <View style={{ margin: '30rpx 30rpx 0 30rpx' }}>
                  <AtSwipeAction
                    className='AtSwipe'
                    key={currentHouse[0].id}
                    onClick={this.onTap.bind(this, currentHouse[0])}
                    autoClose={true}
                    options={[
                      {
                        text: '解绑',
                        style: {
                          color: '#ffffff',
                          width: '80px',
                          margin: 0,
                          fontSize: '14px!important',
                          background: '#FF3E1F',
                        },
                      },
                    ]}
                  >
                    <View style={{ flex: 1 }}>
                      <View className='l_top'>
                        <Text className='w_30'>
                          {currentHouse[0].communityName}
                        </Text>
                        <Text className='w_24'>
                          {currentHouse[0].buildingName}栋
                          {currentHouse[0].unitName}
                          单元
                          {currentHouse[0].houseCode}室
                        </Text>
                      </View>
                      <View className='b_row' style={{ backgroundColor: '#ffffff', padding: '20rpx' }}>
                        <View className='center' style={{ flex: 2 }}>
                          <View className='c_icon'>
                            {currentHouse[0].pictureUrl ? (
                              <Image className='icon' src={currentHouse[0].pictureUrl} mode="aspectFill" />
                            ) : (
                              <Image className='icon' src={uesrImg} mode="aspectFill" />
                            )}
                          </View>
                        </View>
                        <View className='c_sb' style={{ flex: 5, padding: '15rpx 0 15rpx 20rpx', }}>
                          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                            <Text className='l_font'>
                              {currentHouse[0].houseHoldName}
                            </Text>
                            {currentHouse[0].houseHoldType == 1 ? (
                              <Text className='ht_1'>业主</Text>
                            ) : currentHouse[0].houseHoldType == 2 ? (
                              <Text className='ht_2'>租客</Text>
                            ) : (
                              <Text className='ht_3'>家属</Text>
                            )}
                          </View>
                          <View style={{ flexDirection: 'row' }}>
                            <Text className='l_font1' style={{ marginRight: '8rpx' }}>
                              {currentHouse[0].county}
                            </Text>
                            <Text className='d_border'></Text>
                            <Text className='l_font1' style={{ marginLeft: '8rpx', marginRight: '8rpx' }}>
                              {currentHouse[0].street}
                            </Text>
                            <Text className='d_border'></Text>
                            <Text className='l_font1' style={{ marginLeft: '8rpx' }}>
                              {currentHouse[0].houseArea}㎡
                            </Text>
                          </View>
                        </View>
                        <View
                          style={{
                            flex: 2.5,
                            padding: '15rpx 0',
                            justifyContent: 'flex-end',
                            alignContent: 'center',
                          }}>
                          {currentHouse[0].status == 3 ? (
                            <Text className='t_right' style={{ textAlign: 'right', color: '#53C31B' }}>
                              物业审核通过
                            </Text>
                          ) : (
                            <Text className='t_right' style={{ textAlign: 'right', color: '#FC4D44' }}>
                              {currentHouse[0].status == 0
                                ? '待业主审核'//待审核
                                : currentHouse[0].status == 1
                                  ? '待物业审核'//业主审核通过
                                  : currentHouse[0].status == 2
                                    ? '业主审核不通过'
                                    : currentHouse[0].status == 3
                                      ? '物业审核通过'
                                      : currentHouse[0].status == 4
                                        ? '物业审核不通过'
                                        : '未知'}
                            </Text>
                          )}
                        </View>
                      </View>
                    </View>
                  </AtSwipeAction>
                  {other.length > 0 && currentHouse[0].houseHoldType == 1 && (
                    <View style={{ padding: '45rpx 30rpx' }}>
                      <Text style={{ fontSize: '30rpx', color: '#333333' }}>
                        房屋其他住户
                      </Text>
                    </View>
                  )}
                  {other.length > 0 && currentHouse[0].houseHoldType == 1 && this.renderUser(other)}
                </View>
              ) : curNow == 0 && currentHouse.length == 0 ? (
                <Blank
                  content="该社区下没有当前房屋哦~"
                  img={notdataImg}
                  imgStyle={{ width: '400rpx', height: '400rpx' }}
                  textStyle={{
                    fontSize: '32rpx', color: '#999999', textAlign: 'center', marginTop: '40rpx'
                  }}
                />
              ) : null}
              {curNow == 1 && otherHouse.length > 0 ? (
                <View style={{ margin: '30rpx 30rpx 0 30rpx' }}>
                  {this.renderOtherH(otherHouse)}
                </View>
              ) : curNow == 1 && otherHouse.length == 0 ? (
                <Blank
                  content="该社区下没有其他房屋哦~"
                  img={notdataImg}
                  imgStyle={{ width: '400rpx', height: '400rpx' }}
                  textStyle={{
                    fontSize: '32rpx', color: '#999999', textAlign: 'center', marginTop: '40rpx'
                  }}
                />
              ) : null}
            </ScrollView>
          </View>
        ) : (
          <Blank
            content="该社区下没有房屋哦~"
            img={notdataImg}
            imgStyle={{ width: '400rpx', height: '400rpx' }}
            textStyle={{
              fontSize: '32rpx', color: '#999999', textAlign: 'center', marginTop: '40rpx'
            }}
          />
        )}
        <View className="bottom">
          <View className="btn_box">
            <Text className='btn-release'
              onClick={() => {
                this.addClick()
              }}
            >新增房屋</Text>
          </View>
        </View>
        {
          delHouseModel &&
          <AtModal
            isOpened
            title='温馨提示'
            cancelText='取消'
            confirmText='确定'
            onClose={() => {
              this.setState({ delHouseModel: false })
            }}
            onCancel={() => {
              this.setState({ delHouseModel: false })
            }}
            onConfirm={
              () => {
                if (house.defFlag == 1) {//解绑当前房屋
                  this.currentHouseDeletes();
                } else {//解绑其他房屋
                  this.homeDeletes();
                }
              }
            }
            content='解绑后无法撤回，是否确认解绑？'
          />
        }
        {
          delUserModel &&
          <AtModal
            isOpened
            title='温馨提示'
            cancelText='取消'
            confirmText='确定'
            onClose={() => {
              this.setState({ delUserModel: false })
            }}
            onCancel={() => {
              this.setState({ delUserModel: false })
            }}
            onConfirm={
              () => {
                action.userDeletes(user.id);
                this.setState({ delUserModel: false })
              }
            }
            content='删除后无法撤回，是否确认删除？'
          />
        }
        {
          showModel &&
          <AtModal
            isOpened
            title='提示'
            cancelText='不通过'
            confirmText='通 过'
            onClose={this.handleClose.bind(this)}
            onCancel={this.handleCancel.bind(this)}
            onConfirm={this.handleConfirm.bind(this)}
            content='该用户是否通过审核?'
          />
        }
      </View>
    );
  }
}
